<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Forms</title>
    <link rel="stylesheet" type="text/css" href="../../extjs3/resources/css/ext-all.css"/>

	<!-- syntax highlighter -->
	<script type="text/javascript" src="../js/3rdparty/highlighter/scripts/shCore.js"></script>
	<script type="text/javascript" src="../js/3rdparty/highlighter/scripts/shBrushJava.js"></script>
	<script type="text/javascript" src="../js/3rdparty/highlighter/scripts/shBrushJScript.js"></script>

	<link type="text/css" rel="stylesheet" href="../js/3rdparty/highlighter/styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="../js/3rdparty/highlighter/styles/shThemeDefault.css"/>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = '../js/3rdparty/highlighter/scripts/clipboard.swf';
		SyntaxHighlighter.all();
	</script>
	
    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../extjs3/adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="../../extjs3/ext-all-debug.js"></script>

	<script type="text/javascript" src="../js/3rdparty/Ext.lib.Ajax.js"></script>
	
	<!-- required for cookie compression -->
	<script type="text/javascript" src="../js/3rdparty/lz77.js"></script>

	<!-- translation part -->     
        <script type="text/javascript" src="../js/Ext.translate.js"></script>
		<script type="text/javascript" src="../js/Ext.translate.Manager.js"></script>        
		<script type="text/javascript" src="../js/Ext.translate.local.js"></script>          
        <script type="text/javascript" src="../js/Ext.translate.Cache.js"></script>
        <script type="text/javascript" src="../js/Ext.translate.MessageBox.js"></script>
        <script type="text/javascript" src="../js/Ext.translate.Override.js"></script>

         <script type="text/javascript" src="../js/3rdparty/Ext.ux.form.IconCombo.js"></script>
		<script type="text/javascript" src="../js/Ext.translate.LanguageCombo.js"></script>


<script type="text/javascript" >

function intiLangSelector(){

    var languageId = Ext.id();
      
    var _formPanel = new Ext.form.FormPanel({
       region: 'center',
       border: false,
       bodyStyle: "padding: 5px;",
       baseCls: 'x-plain',
       labelWidth: 'auto',
       defaults: {
         width: 250
       },
       items: [new Ext.translate.LanguageCombo() ]

     });    
    
    _formPanel.render(document.body);
 };



 function dome(){
		Ext.MessageBox.show({
			title: 'We love ExtJs',
			msg: 'This is translated message!',
			buttons: Ext.MessageBox.OK,
			icon: Ext.MessageBox.INFO
		});
	};
		

	function dome2(){
		Ext.Msg.alert('Status', 'Changes saved successfully.');
	};

	
			
Ext.onReady(function(){



    Ext.translate.Manager.Init({
			        currentLanguage : 'CROATIAN',
			    	URL : '../TranslateServlet',
			        languageImagesURL : '../img/flags/',
			        autocreateIonsCSS : true});

    Ext.translate.Manager.getSupportedLanguages();
    intiLangSelector();


    new Ext.Panel({
    	isTranslate : false,
        renderTo: 'msg1',
        labelWidth: 75, 
        frame:true,
        title: 'Message sample 1',
        bodyStyle:'padding:5px 5px 0',
        width: 450,
        html : Ext.get('mymsg1').dom.innerHTML,
        items : {xtype:'button',
    			 isTranslate : false,
                 text :'Show message',
                 handler : dome}
        
    });
    Ext.get('mymsg1').remove();

    new Ext.Panel({
    	isTranslate : false,
        renderTo: 'msg2',
        labelWidth: 75, 
        frame:true,
        title: 'Message sample 2',
        bodyStyle:'padding:5px 5px 0',
        width: 450,
        html : Ext.get('mymsg2').dom.innerHTML,
        items : {xtype:'button',
                 text :'Show message',
                 isTranslate : false,
                 handler : dome2}
        
    });
    Ext.get('mymsg2').remove();
});



</script>
</head>
<body>

<div id="msg1"></div>
<div id="mymsg1" class="x-hidden">
<pre class="brush:js">
	Ext.MessageBox.show({
		title: 'We love ExtJs',
		msg: 'This is translated message!',
		buttons: Ext.MessageBox.OK,
		icon: Ext.MessageBox.INFO
	});
</pre> 
</div>

<br><br>

<div id="msg2"></div>
<div id="mymsg2" class="x-hidden">
<pre class="brush:js">
	Ext.Msg.alert('Status', 'Changes saved successfully.');
</pre>
</div>


</body>
</html>
